<template>
  <customContainer ref="mainConfig" :config="config" />
</template>
<script lang='ts' setup>
import { ref, computed } from 'vue'
import { DictDirection } from '@/store/modules/dicts'

const mainConfig = ref(null)
const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
})         
const handexport = () => {}
const handleTableSelect = (rows: { [key: string]: any }[]) => {}
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '客户订单号',
            prop: 'waybillNo',
            option: {
              placeholder: '请输入客户订单号',
              type: 'textarea',
            },
          },
          {
            label: '提单号',
            prop: 'ladingNo',
            option: {
              placeholder: '请输入提单号',
              type: 'textarea',
            },
          },
          {
            label: '虚拟柜号',
            prop: 'cabinetNo',
            option: {
              placeholder: '请输入虚拟柜号',
              type: 'textarea',
            },
          },
        
        ],
        queryParams: queryParams.value,
        formOption: {},
      },
      btns: [
        {
          title: '导出',
          type: 'primary',
          onClick: handexport,
        },
       
      ],
      table: {
        columns: [
          { type: 'selection', width: '55' },
          {
            label: '提单号',
            prop: 'ladingNo',
            align: 'center',
            width: '120',
          },
          { label: '虚拟柜号', align: 'center', prop: 'cabinetNo', width: '120' },
          { label: '运输类型',
            align: 'center',
            prop: 'transportType',
            autoFormatter: {
              dict: DictDirection.运输类型,
              rowKey: 'transportType',
            } },
          { label: '服务商简称', align: 'center', prop: 'providerServiceCode' },
          { label: '服务渠道',
            align: 'center',
            prop: 'serviceChannelCode',
            autoFormatter: {
              dict: DictDirection.服务渠道,
              rowKey: 'serviceChannelCode',
            } },
          { label: '状态',
            align: 'center',
            width: '100',
            prop: 'status',
            autoFormatter: {
              dict: DictDirection.包裹状态,
              rowKey: 'status',
            } },
          { label: '审核状态', align: 'center', prop: 'approvalStatus' },
          { label: '船名航次', align: 'center', prop: 'voyageNo' },
          { label: '目的港', align: 'center', prop: 'portDestination' },
          { label: '封号', align: 'center', prop: 'sealNo' },
          { label: '箱号', align: 'center', prop: 'caseNo' },
          { label: '船/航空公司', align: 'center', prop: 'transportName' },
          { label: '装柜地点', align: 'center', prop: 'loadingLocation' },
          { label: '创建日期', align: 'center', prop: 'createDate' },
          { label: '总实重', align: 'center', prop: 'totalSolidWeight' },
          { label: '总材积重（方）', align: 'center', prop: 'totalVolumeWeight' },
          { label: '总件数', align: 'center', prop: 'totalPiece' },
          { label: '报关行', align: 'center', prop: 'customsLine' },
          { label: '拖车行', align: 'center', prop: 'trailerLine' },
          { label: '预计起飞日', align: 'center', prop: 'expectedSailingDate', width: '150' },
          // { :label:queryParams.transportType == 2 ? '预计起飞日' : '预计开船日', prop: 'expectedSailingDate' },
          { label: '预计到达', align: 'center', prop: 'expectedArrivalDate', width: '150' },
          // {
          //   label: '操作',
          //   align: 'center',
          //   fixed: 'right',
          //   width: '300',
          //   render(h, params) {
          //     const buttons = [
          //       {
          //         title: '应付费',
          //         clickFun: tofee,
          //       },
          //       {
          //         title: '查看详情',
          //         clickFun: handleRouterPush,
          //       },
          //     ]
          //     return buttons.map((el) => h(
          //       ElButton,
          //       {
          //         text: true,
          //         type: 'primary',
          //         // icon: el.icon,
          //         onClick: () => {
          //           el.clickFun(params.row)
          //         },
          //       },
          //       {
          //         default: () => el.title,
          //       },
          //     ))
          //   },
          // },
        ],
        event: {
          onSelectionChange: (rows) => {
            handleTableSelect(rows)
          },
        },
      },
      api: '',
      customKey: 'dataReport/airSeaForm',
    }
  },
  set(v) {
    return v
  },
})
</script>
